import React from 'react';
import { Card, Table, Tag, Button, Space, Breadcrumb, Collapse } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './Feedback.module.less';

const { Panel } = Collapse;

interface FeedbackItem {
  id: string;
  title: string;
  type: string;
  status: 'pending' | 'processing' | 'resolved';
  priority: 'high' | 'medium' | 'low';
  createTime: string;
  deadline: string;
  description: string;
}

interface ProjectItem {
  id: string;
  name: string;
  code: string;
  status: string;
  startTime: string;
  manager: string;
  feedbacks: FeedbackItem[];
}

const Feedback: React.FC = () => {
  const navigate = useNavigate();

  const priorityConfig = {
    high: { color: 'red', text: '高' },
    medium: { color: 'orange', text: '中' },
    low: { color: 'green', text: '低' }
  } as const;

  const statusConfig = {
    pending: { color: 'default', text: '待处理' },
    processing: { color: 'processing', text: '处理中' },
    resolved: { color: 'success', text: '已解决' }
  } as const;

  const feedbackColumns = [
    {
      title: '问题标题',
      dataIndex: 'title',
      key: 'title',
      width: '25%',
    },
    {
      title: '问题类型',
      dataIndex: 'type',
      key: 'type',
      width: '12%',
      render: (type: string) => <Tag color="blue">{type}</Tag>,
    },
    {
      title: '优先级',
      dataIndex: 'priority',
      key: 'priority',
      width: '10%',
      render: (priority: FeedbackItem['priority']) => {
        const config = priorityConfig[priority];
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: '12%',
      render: (status: FeedbackItem['status']) => {
        const config = statusConfig[status];
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: '15%',
    },
    {
      title: '截止时间',
      dataIndex: 'deadline',
      key: 'deadline',
      width: '15%',
    },
    {
      title: '操作',
      key: 'action',
      render: (_: unknown, record: FeedbackItem) => (
        <Space>
          <Button 
            type="link" 
            onClick={() => navigate(`/pre-acceptance/feedback/detail/${record.id}`)}
          >
            查看详情
          </Button>
          {record.status !== 'resolved' && (
            <Button 
              type="link"
              onClick={() => navigate(`/pre-acceptance/feedback/reform/${record.id}`)}
            >
              提交整改反馈
            </Button>
          )}
        </Space>
      ),
    },
  ];

  const projects: ProjectItem[] = [
    {
      id: '1',
      name: '示范区档案管理项目',
      code: 'PRJ001',
      status: '预验收中',
      startTime: '2024-03-15',
      manager: '张三',
      feedbacks: [
        {
          id: 'f1',
          title: '档案目录不完整',
          type: '材料问题',
          status: 'pending',
          priority: 'high',
          createTime: '2024-03-16 10:30',
          deadline: '2024-03-20',
          description: '部分重要档案缺少目录索引'
        },
        // ... 更多反馈项
      ]
    },
    // ... 更多项目
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '档案预验收',
          },
          {
            title: '问题反馈',
          }
        ]} />
      </div>

      <Card title="问题反馈列表" className={styles.feedbackCard}>
        <Collapse className={styles.projectList}>
          {projects.map(project => (
            <Panel
              key={project.id}
              header={
                <div className={styles.projectHeader}>
                  <span className={styles.projectName}>{project.name}</span>
                  <Tag>{project.code}</Tag>
                  <Tag color="processing">{project.status}</Tag>
                  <span className={styles.projectInfo}>
                    负责人：{project.manager}
                  </span>
                  <span className={styles.projectInfo}>
                    开始时间：{project.startTime}
                  </span>
                </div>
              }
            >
              <Table
                columns={feedbackColumns}
                dataSource={project.feedbacks}
                rowKey="id"
                pagination={false}
              />
            </Panel>
          ))}
        </Collapse>
      </Card>
    </MainLayout>
  );
};

export default Feedback; 